import React, { Component } from 'react';
import RouterView from '../../router/RouterView';
import { NavBar, SearchBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom';
import service from '../../api';
import "./searchbox.css"

class searchbox extends Component {

    constructor(props) {
        super(props);
        this.state = {
            searchlist: []
        }
    }
    back() {
        this.props.history.push('/index/home')
    }

    change(value) {
        console.log(value);
        service.product.pro_search({ keyword: value }).then((res) => {
            console.log(res.data);
            this.setState({ searchlist: [...this.state.searchlist, value] }, () => {
                console.log(this.state.searchlist);
                // 将搜索的列表保存到本地
                localStorage.setItem('search', this.state.searchlist)
            })
            if (res.data.code == 200) {
                this.props.history.push({ pathname: '/searchbox/manyproduct', state: { productlist: res.data.data } })
            }
        })
    }
    render() {
        return (
            <div className='searchbox'>
                <NavBar onBack={() => {this.back()}}>搜索</NavBar>
                <SearchBar
                    placeholder='请输入内容'
                    showCancelButton
                    style={{
                        '--border-radius': '100px',
                        '--background': '#ffffff',
                        '--height': '32px',
                        '--padding-left': '14px',
                    }}
                    onSearch={(value) => { this.change(value) }}
                />
                {/* 渲染RouterView组件(传入二级路由规则,内部会动态生成二级路由规则) */}
                <RouterView routes={this.props.routes} />
            </div>
        );
    }
}

export default withRouter(searchbox);